﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars2d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/muyao1987/cdn/marsgis.cn/favicon/favicon.ico" />

    <meta name="keywords" content="火星科技,leaflet,mars2d,GIS,marsgis,二维,地图,地球,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 leaflet leaflet开发 leaflet框架 二维 地图 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 二维地图 全景漫游 地理信息系统 云GIS 二维GIS GIS平台 WebGIS"
    />

    <title>Mars2D地图 |二维地图| 火星科技|合肥火星科技|合肥火星科技有限公</title>

    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,bootstrap,bootstrap-checkbox,layer,haoutil,mars2d"
    ></script>

    <link href="css/style.css" rel="stylesheet" />
    <link href="css/divGraphic.css" rel="stylesheet" />
    <style>
      .mars2d-label-graphic {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="mars2dContainer" class="mars2d-container"></div>

    <div class="infoview">
      <div>
        图层状态：
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkShow" class="styled" type="checkbox" checked />
          <label for="chkShow"> 显示隐藏 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkPopup" class="styled" type="checkbox" />
          <label for="chkPopup"> Popup绑定 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkTooltip" class="styled" type="checkbox" />
          <label for="chkTooltip"> Tooltip绑定 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkContextMenu" class="styled" type="checkbox" checked />
          <label for="chkContextMenu"> 右键菜单绑定 </label>
        </div>
      </div>
      <div>
        数据维护：
        <input id="btnStartDraw" type="button" class="btn btn-primary" value="图上标绘" title="在图上绘制新增一个矢量数据" />

        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkHasEdit" class="styled" type="checkbox" />
          <label for="chkHasEdit"> 是否编辑 </label>
        </div>
      </div>
      <div>
        数据管理：
        <input id="btnClear" type="button" class="btn btn-danger" value="清除" />
        <input id="btnExpFile" type="button" class="btn btn-primary" value="保存GeoJSON" title="保存为GeoJSON文件" />
        <input id="btnImpFile" type="button" class="btn btn-primary" value="打开GeoJSON" title="打开之前保存的GeoJSON文件" />

        <input id="input_draw_file" type="file" accept=".json,.geojson" style="display: none" />
      </div>
    </div>


    <script src="./js/common.js"></script>
    <script type="text/javascript">
      "use script"; //开发环境建议开启严格模式

      let map;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        let mapOptions = mars2d.Util.merge(options, {
          zoom: 10,
          center: { lng: "117.228241", lat: "31.448231" },
        });

        //创建地图
        map = new mars2d.Map("mars2dContainer", mapOptions);
        map.basemap = 2017; //切换到蓝色底图

        //创建矢量数据图层
        let graphicLayer = new mars2d.layer.GraphicLayer();
        map.addLayer(graphicLayer);

        //图层管理的相关处理，
        initLayerManager(graphicLayer);
        graphicLayer.unbindPopup();

        //新增绘制
        $("#btnStartDraw").click(function () {
          //开始绘制
          graphicLayer.startDraw({
            type: "divGraphic",
            style: {
              html: `<div class="marsBlueGradientPnl">
                    <div>我是火星科技</div>
                </div>`,
              offsetY: -60,
              horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
              verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
            },
            success: function (graphic) {
              console.log("标绘完成", graphic);
            },
          });
        });

        //加一些演示数据
        addGraphic_01(graphicLayer);
        addGraphic_02(graphicLayer);
        addGraphic_03(graphicLayer);
        addGraphic_04(graphicLayer);
        addGraphic_05(graphicLayer);
        addGraphic_06(graphicLayer);
        addGraphic_07(graphicLayer);
        addGraphic_08(graphicLayer);
        addGraphic_09(graphicLayer);
        addGraphic_10(graphicLayer);
        addGraphic_11(graphicLayer);
        addGraphic_12(graphicLayer);
      }

      //一个黑色面板，指向左下角黄色连线
      function addGraphic_01(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.712894, 117.255707],
          style: {
            html: `<div class="marsBlackPanel  animation-spaceInDown">
                    <div class="marsBlackPanel-text">大湖名城,创新高地</div>
                </div>`,
          },
        });
        graphicLayer.addGraphic(graphic);

        // graphic.testPoint = true; //打开测试点，与DIV点进行对比位置调整css
      }

      //一个渐变的文本面板,中间竖直连线
      function addGraphic_02(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.42959, 117.162323],
          style: {
            html: `<div class="marsBlueGradientPnl">
                    <div>合肥火星科技有限公司</div>
                </div>`,
            offsetY: -65,
            horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
            verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //
      function addGraphic_03(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.467101, 116.942596],
          style: {
            html: `<div class="marsGreenGradientPnl" >安徽欢迎您</div>`,
            horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
            verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //添加GIF图标，DIV方式
      function addGraphic_04(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.164872, 116.79013],
          style: {
            html: '<img src="img/marker/tf.gif" style="width:50px;height:50px;" ></img>',
            horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
            verticalOrigin: mars2d.VerticalOrigin.CENTER,
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //加css动画的扩散点 DivLightPoint
      function addGraphic_05(graphicLayer) {
        var graphic = new mars2d.graphic.DivLightPoint({
          latlng: [31.775993, 117.092285],
          style: {
            color: "#ff0000",
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //内置扩展的动态文本 DivBoderLabel
      function addGraphic_06(graphicLayer) {
        var graphic = new mars2d.graphic.DivBoderLabel({
          latlng: [31.542078, 117.577057],
          style: {
            text: "火星科技Mars2D平台",
            font_size: 15,
            font_family: "微软雅黑",
            color: "#ccc",
            boderColor: "#15d1f2",
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //内置扩展的竖立文本 DivBoderLabel
      function addGraphic_07(graphicLayer) {
        var graphic = new mars2d.graphic.DivUpLabel({
          latlng: [31.453036, 117.964325],
          style: {
            text: "我是竖立的文本",
            color: "#fff",
            font_size: 16,
            font_family: "微软雅黑",
            lineHeight: 60,
            circleSize: 8,
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //
      function addGraphic_08(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.612314, 116.441345],
          style: {
            html: "火星科技",
            className: "mars2d-label-graphic",
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //font字体
      function addGraphic_09(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.785337, 117.634735],
          style: {
            html: '<i class="fa fa-tree" style="color:#ffff00;font-size:30px;"></i>',
            horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
            verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //圆点
      function addGraphic_10(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: L.latLng(31.818606, 117.296904),
          style: {
            className: "mars2d-colorPoint",
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //倾斜指向左下角的面板样式
      function addGraphic_11(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.247684, 117.516632],
          style: {
            html: `<div class="marsTiltPanel marsTiltPanel-theme-red">
                <div class="marsTiltPanel-wrap">
                    <div class="area">
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">火星水厂</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">实时流量：</div>
                                    <div class="data-value"><span id="lablLiuliang" class="label-num">39</span><span class="label-unit">m³/s</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水池液位：</div>
                                    <div class="data-value"><span id="lablYeWei"  class="label-num">10.22</span><span class="label-unit">m</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水泵状态：</div>
                                    <div class="data-value">
                                      <span id="lablSBZT1"  class="label-tag data-value-status-1" alt="中间状态">1号</span>
                                      <span id="lablSBZT2"  class="label-tag data-value-status-0" alt="关闭状态">2号</span>
                                     </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">出水阀门：</div>
                                    <div class="data-value">
                                      <span id="lablCSFM1"   class="label-tag data-value-status-1" alt="中间状态">1号</span>
                                      <span id="lablCSFM2"   class="label-tag data-value-status-2" alt="打开状态">2号</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
            horizontalOrigin: mars2d.HorizontalOrigin.LEFT,
            verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
          },
        });
        graphicLayer.addGraphic(graphic);

        graphic.on(mars2d.EventType.updatePosition, function (event) {
          console.log("更新了div的位置");
        });

        //刷新局部DOM,不影响面板的其他控件操作
        setInterval(() => {
          let container = graphic?.container; //popup对应的DOM
          if (!container) {
            return;
          }

          let lablLiuliang = container.querySelector("#lablLiuliang");
          if (lablLiuliang) {
            lablLiuliang.innerHTML = (Math.random() * 100).toFixed(0); //测试的随机数
          }

          let lablYeWei = container.querySelector("#lablYeWei");
          if (lablYeWei) {
            lablYeWei.innerHTML = Number(new Date().format("ss.S")).toFixed(2); //测试的随机数
          }
        }, 500);

        //演示绑定单击事件
        $("#lablSBZT1").click(function () {
          haoutil.msg("单击了1号水泵");
        });
        $("#lablSBZT2").click(function () {
          haoutil.msg("单击了2号水泵");
        });
        $("#lablCSFM1").click(function () {
          haoutil.msg("单击了1号出水阀门");
        });
        $("#lablCSFM2").click(function () {
          haoutil.msg("单击了2号出水阀门");
        });
      }

      //倾斜指向左下角的面板样式
      function addGraphic_12(graphicLayer) {
        var graphic = new mars2d.graphic.DivGraphic({
          latlng: [31.284093, 116.330109],
          style: {
            html: `<div class="marsTiltPanel marsTiltPanel-theme-blue">
                <div class="marsTiltPanel-wrap">
                    <div class="area">
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">岳西水厂</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">实时流量：</div>
                                    <div class="data-value"><span class="label-num">98</span><span class="label-unit">m³/s</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水池液位：</div>
                                    <div class="data-value"><span class="label-num">13.14</span><span class="label-unit">m</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水泵状态：</div>
                                    <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span
                                            class="label-tag data-value-status-0" alt="关闭状态">2号</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
            horizontalOrigin: mars2d.HorizontalOrigin.LEFT,
            verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
          },
        });
        graphicLayer.addGraphic(graphic);

        // graphic.testPoint = true; //打开测试点，与DIV点进行对比位置调整css
      }

      //在图层级处理一些事物
      function initLayerManager(graphicLayer) {
        //在layer上绑定监听事件
        graphicLayer.on(mars2d.EventType.click, function (event) {
          console.log("监听layer，单击了矢量对象", event);
        });

        //可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
        bindLayerPopup(graphicLayer);

        $("#chkPopup").change(function () {
          let val = $(this).is(":checked");

          if (val) {
            bindLayerPopup(graphicLayer);
          } else {
            graphicLayer.unbindPopup();
          }
        });

        //可在图层上绑定tooltip,对所有加到这个图层的矢量数据都生效
        $("#chkTooltip").change(function () {
          let val = $(this).is(":checked");

          if (val) {
            graphicLayer.bindTooltip("我是layer上绑定的Tooltip");
          } else {
            graphicLayer.unbindTooltip();
          }
        });

        //可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
        bindLayerContextMenu(graphicLayer);
        $("#chkContextMenu").change(function () {
          let val = $(this).is(":checked");

          if (val) {
            bindLayerContextMenu(graphicLayer);
          } else {
            graphicLayer.unbindContextMenu(true);
          }
        });

        $("#chkHasEdit").change(function () {
          let val = $(this).is(":checked");

          graphicLayer.hasEdit = val; //启用编辑
        });

        $("#chkShow").change(function () {
          let val = $(this).is(":checked");

          graphicLayer.show = val; //显示隐藏
        });

        $("#btnClear").click(function () {
          graphicLayer.clear();
        });

        $("#btnExpFile").click(function () {
          if (graphicLayer.length === 0) {
            window.layer.msg("当前没有标注任何数据，无需保存！");
            return;
          }

          let geojson = graphicLayer.toGeoJSON();
          haoutil.file.downloadFile("我的标注.json", JSON.stringify(geojson));
        });

        $("#btnImpFile").click(function () {
          $("#input_draw_file").click();
        });

        function clearSelectFile() {
          if (!window.addEventListener) {
            document.getElementById("input_draw_file").outerHTML += ""; //IE
          } else {
            document.getElementById("input_draw_file").value = ""; //FF
          }
        }

        $("#input_draw_file").change(function (e) {
          let file = this.files[0];

          let fileName = file.name;
          let fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();

          if (fileType == "json" || fileType == "geojson") {
            let reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onloadend = function (e) {
              let json = this.result;
              graphicLayer.loadGeoJSON(json, {
                flyTo: true,
              });
              clearSelectFile();
            };
          } else {
            window.layer.msg("暂不支持 " + fileType + " 文件类型的数据！");
            clearSelectFile();
          }
        });
      }

      function bindLayerPopup(graphicLayer) {
        graphicLayer.bindPopup(function (event) {
          let attr = event.graphic?.attr || {};
          attr.test1 = "测试属性";
          // attr["视频"] = `<video src='http://data.mars2d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video>`;

          return mars2d.Util.getTemplateHtml({ title: "layer上绑定的Popup", template: "all", attr: attr });
        });
      }

      function bindLayerContextMenu(graphicLayer) {
        graphicLayer.bindContextMenu([
          {
            text: "开始编辑对象",
            iconCls: "fa fa-edit",
            show: function (e) {
              let graphic = e.graphic;
              if (!graphic || !graphic.editing) {
                return false;
              }
              return !graphic.editing.enabled();
            },
            callback: function (e) {
              let graphic = e.graphic;
              if (graphic && graphic.editing) {
                graphic.editing.enable();
              }
            },
          },
          {
            text: "停止编辑对象",
            iconCls: "fa fa-edit",
            show: function (e) {
              let graphic = e.graphic;
              if (!graphic || !graphic.editing) {
                return false;
              }
              return graphic.editing.enabled();
            },
            callback: function (e) {
              let graphic = e.graphic;
              if (graphic && graphic.editing) {
                graphic.editing.disable();
              }
            },
          },
          {
            text: "删除对象",
            iconCls: "fa fa-trash-o",
            show: (event) => {
              let graphic = event.graphic;
              if (!graphic) {
                return false;
              } else {
                return true;
              }
            },
            callback: function (e) {
              let graphic = e.graphic;
              if (!graphic) {
                return;
              }
              graphicLayer.removeGraphic(graphic);
            },
          },
        ]);
      }
     </script>
  </body>
</html>
